import * as echarts from '@/components/ec-canvas/echarts.js';

export const weatherChartOption = (tMax, tMin) => {
    return {
        xAxis: {
            type: 'category',
            show: false
        },
        grid: {
            top: '5%',
            bottom: '10%',
            left: 0,
            right: 0,
            width: '100%',
            height: '100%'
        },
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    show: false
                },
                splitLine: { show: false },
                min: Math.min(...tMin) - 2,
                max: Math.max(...tMax)
            }
        ],
        series: [
            {
                data: tMax,
                type: 'line',
                lineWidth: 1,
                symbolSize: 3,
                label: {
                    show: true,
                    fontSize: 8,
                    position: 'bottom',
                    formatter: (params) => {
                        return `${params.data}°C`;
                    }
                }
            },
            {
                data: tMin,
                type: 'line',
                lineWidth: 1,
                symbolSize: 3,
                label: {
                    show: true,
                    fontSize: 8,
                    formatter: (params) => {
                        return `${params.data}°C`;
                    }
                }
            }
        ]
    };
};

// 股票蜡烛图图表
export const candlestickChartOption = (xData, yData, yMin) => {
    return {
        tooltip: {
            trigger: 'item',
            textStyle: {
                textShadowColor: 'transparent',
                textShadowBlur: 10
            },
            formatter: function (params) {
                return `日期: ${params.name}\n开盘价: ${params.value[1]}\n收盘价: ${params.value[2]}\n最高价: ${params.value[3]}\n最低价: ${params.value[4]}`;
            }
        },
        xAxis: {
            type: 'category',
            name: '日期',
            data: xData,
            offset: 20
        },
        grid: {
            top: 20,
            bottom: 60,
            left: 60,
            right: 60
        },
        yAxis: {
            min: yMin,
            axisLabel: {
                formatter: (value) => {
                    return `${value.toFixed(2)}`;
                }
            }
        },
        series: [
            {
                type: 'candlestick',
                data: yData
            }
        ]
    };
};

// 股票成交量图表
export const turnoverChartOption = (xData, yData, yMin) => {
    return {
        tooltip: {
            trigger: 'item',
            textStyle: {
                textShadowColor: 'transparent',
                textShadowBlur: 10
            },
            formatter: (parmas) => {
                return `日期: ${parmas.name}\n成交量: ${parmas.value} M`;
            }
        },
        xAxis: {
            type: 'category',
            name: '日期',
            data: xData,
            offset: 20
        },
        grid: {
            top: 20,
            bottom: 60,
            left: 70,
            right: 60
        },
        yAxis: {
            min: yMin,
            axisLabel: {
                formatter: (value) => {
                    return `${value.toFixed(2)} M`;
                }
            }
        },
        series: [
            {
                type: 'line',
                data: yData,
                symbolSize: 5,
                markLine: {
                    data: [
                        {
                            type: 'average',
                            label: {
                                formatter: (params) => {
                                    return `${params.value.toFixed(2)}M`;
                                }
                            }
                        }
                    ],
                    silent: true,
                    symbol: 'none'
                }
            }
        ]
    };
};

// 城市用电量图表
export const electricityConsumptionChartOption = (xData, yData, zoneName) => {
    return {
        tooltip: {
            textStyle: {
                textShadowColor: 'transparent',
                textShadowBlur: 10
            },
            formatter: (params) => {
                return `日期: ${params.name}\n用电量: ${params.data}度`;
            }
        },
        title: {
            text: `${zoneName} 用电量预测`,
            left: 'center'
        },
        grid: {
            top: '20%',
            bottom: '12%',
            left: '16%',
            right: '15%'
        },
        xAxis: {
            type: 'category',
            data: xData,
            name: '日期'
        },
        yAxis: {
            type: 'value',
            name: '用电量',
            axisLabel: {
                formatter: (value) => {
                    if (value === 0) return '0';
                    const absValue = Math.abs(value);
                    if (absValue < 1000) {
                        return (value / 100).toFixed(0) + '百度';
                    } else if (absValue < 10000) {
                        return (value / 1000).toFixed(0) + '千度';
                    } else {
                        return (value / 10000).toFixed(0) + '万度';
                    }
                }
            }
        },
        series: [
            {
                type: 'bar',
                data: yData
            }
        ]
    };
};

export const initChart = (canvas, width, height, dpr) => {
    const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
    });
    canvas.setChart(chart);
    return chart;
};
